import { Button, Card, Flex, Tag, SwipeAction } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I004 from '../../icons/I004.svg?react';
import { toCurrency } from "@/utils/funs";

const { Text } = Typography;

/** 支付记录 */
export function PaymentRecords() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px', color: '#9f2d00' }}>
                    <Icon component={I004} style={{ marginRight: 6 }} />
                    支付记录
                </Text>
                <Button size="small">增加</Button>
            </Flex>
            <Flex vertical gap={16}>
                <CashPayment />
                <RechargeCardPayment />
                <IntegralPayment />
            </Flex>
            <Flex justify='space-between' style={{ marginTop: 16 }}>
                <Text size={12} style={{ color: '#9f2d00' }}>合计：{toCurrency(22200)}</Text>
            </Flex>
        </Card>
    )
}

/** 现金支付 */
function CashPayment() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '删除', key: 'delete', color: 'red' }
            ]}
        >
            <Flex vertical>
                <Flex gap={8} align='center' style={{ width: '100%' }}>
                    <Text size={14} style={{ color: '#9f2d00' }}>支付金额: {toCurrency(1000)}</Text>
                    <Tag fill="outline">现金</Tag>
                </Flex>
                <Text size={12} style={{ color: '#f54a00' }}>支付时间：2024-01-01</Text>
            </Flex>
        </SwipeAction>
    )
}

/** 储值卡支付 */
function RechargeCardPayment() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '删除', key: 'delete', color: 'red' }
            ]}
        >
            <Flex vertical>
                <Flex gap={8} align='center' style={{ width: '100%' }}>
                    <Text size={14} style={{ color: '#9f2d00' }}>支付金额: {toCurrency(12)}</Text>
                    <Tag fill="outline">储值卡</Tag>
                </Flex>
                <Text size={12} style={{ color: '#f54a00' }}>卡号：1234567890</Text>
            </Flex>
        </SwipeAction>
    )
}


/** 积分支付 */
function IntegralPayment() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '删除', key: 'delete', color: 'red' }
            ]}
        >
            <Flex vertical>
                <Flex gap={8} align='center' style={{ width: '100%' }}>
                    <Text size={14} style={{ color: '#9f2d00' }}>支付金额: {toCurrency(100)}</Text>
                    <Tag fill="outline">积分</Tag>
                </Flex>
                <Text size={12} style={{ color: '#f54a00' }}>100 积分</Text>
            </Flex>
        </SwipeAction>
    )
}

